<#-- <#import "../common/mymacros.ftl" as mymacro> -->
<div>
	<div class="box-header">
		<div class="row RowSearchWork">
			<div class="col-sm-12">
				<div class="col-sm-6">
					<label>卡券名称：</label>
					<input type="text" class="form-control" placeholder="请输入卡券名称" name="cardName" id="cardName" style="display: inline-block; width: 60%;"/>
				</div>
				<div class="col-sm-1">
					<input type="button" class="btn btn-default btn-search" onclick="query()" value="查询" />
				</div>
			</div>
		</div>
	</div>
	
	<div class="box-body">
		<table class="table table-hover table-bordered table-striped table-manage" id="myTable">
			<thead>
				<tr>
					<th style="width:10%;">序号</th>
					<th style="width:10%;">卡券名称</th>
					<th style="width:10%;">使用用途</th>
					<th style="width:10%;">折扣类型</th>
					<th style="width:10%;">打折/抵扣金额</th>
					<th style="width:10%;">使用期限(天)</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="row" id="pageNumberNoDataDiv">
			<div class="col-sm-12" style="text-align: center;margin-top: 10px">
				<span>暂无数据!</span>
			</div>
		</div>
		<div class="row hide" id="pageNumberDataDiv">
			<div class="col-sm-12">
				<nav aria-label="Page" style="float: right">
					<ul class="_page_size">
						<li>
							<label id="totalElements">共0条&nbsp;&nbsp;&nbsp;&nbsp; </label>
						</li>
						<li>
							<label>
								每页显示
								<select name="pageSize" id="pageSize">
									<option value="10">10</option>
									<option value="20">20</option>
									<option value="50">50</option>
									<option value="100">100</option>
								</select>条
							</label>
						</li>
						<!-- <li class="ml15">
							<span>转到第</span>
							<input type="text" id="_changePageNumber" class="changePageNumber" />
							<span>页</span>
						</li> -->
					</ul>
					<ul class="pagination">
						<li class="page-item">
							<a class="page-link" name="previous" href="javascript:void(0)" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
								<span class="sr-only">Previous</span>
							</a>
						</li>
						
						<li class="page-item">
							<a class="page-link" name="next" href="javascript:void(0)" aria-label="Next">
								<span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<input type="hidden" name="pageNumber" />
			<input type="hidden" id="totalPages" />
		</div>
	</div>
</div>

<script type="text/javascript">
	$('.select2').select2();
	$.fn.modal.Constructor.prototype.enforceFocus = function() {};
	
	/* 优惠力度 */
	var preferentialType = {
		<#list preferentialTypeMap as k, v>
			"${k}": "${v!}",
		</#list>
	};
	
	function pagescope(totalPages, currentPage) {
		var start = 1;
		var end = totalPages;
		if (currentPage + 1 - 2 >= 1){
			start = currentPage + 1 - 2;
		}
		if (start + 4 <= totalPages) {
			end = start + 4;
		}
		var pageScope = new Array();
		for(var i = start; i <= end; i++){
			pageScope.push(i);
		}
		return pageScope;
	}
	
	function query(pageNumber, pageSize) {
		var cardName = $("#cardName").val();
		if (!pageNumber) {
			var currentPageNum = $("#pageNumberDataDiv input[name='pageNumber']").val();
			if (!currentPageNum || currentPageNum == 0) {
				pageNumber = 0;
			} else {
				pageNumber = currentPageNum;
			}
		}
		pageSize = pageSize ? pageSize : 10;
		
		var params = {"cardName" : cardName, "pageNumber" : pageNumber, "pageSize" : pageSize};
		
		$.ajax({
			url : "${ctx}/cardtype/givelist",
			type : 'post',
			dataType : 'json',
			async : false,
			data : params,
			success : function(response) {
				$("#myTable tbody").html('');
				if (response.result == 'success') {
					var page = response.data;
					if (page.content.length > 0) {
						// 列表数据 
						var tbodyHtml = '';
						for (var i = 0; i < page.content.length; i++) {
							tbodyHtml += '<tr>';
							tbodyHtml += '<td>'+page.pageSize * page.pageNum + (i+1)+'</td>';
							tbodyHtml += '<td>'+page.content[i].cardName+'</td>';
							tbodyHtml += '<td style="overflow: inherit; text-overflow: inherit; white-space: inherit;">'+page.content[i].cardUseNameStr+'</td>';
							tbodyHtml += '<td>'+preferentialType[page.content[i].preferentialType]+'</td>';
							tbodyHtml += '<td>'+page.content[i].preferentialIntensity+'</td>';
							tbodyHtml += '<td>'+page.content[i].useDuration+'</td>';
							tbodyHtml += '</tr>';
						}
						$("#myTable tbody").html(tbodyHtml);
						
						// 分页页码 
						var pageScopeHtml = '';
						var pageScope = pagescope(page.totalPages, page.pageNum);
						for (var i = 0; i < pageScope.length; i++) {
							if (page.pageNum+1 == pageScope[i]) {
								pageScopeHtml += '<li class="page-item active">';
							} else {
								pageScopeHtml += '<li class="page-item">';
							}
							pageScopeHtml += '<a name="_pageNumber" class="page-link" href="javascript:void(0)">'+pageScope[i]+'</a>';
							pageScopeHtml += '</li>';
						}
						$("#pageNumberDataDiv .pagination a[name='_pageNumber']").parent().remove();
						$("#pageNumberDataDiv .pagination a[name='next']").parent().before(pageScopeHtml);
						
						// 分页汇总信息 
						$("#totalElements").html('共'+page.totalElements+'条&nbsp;&nbsp;&nbsp;&nbsp; ');
						$("#pageSize").val(page.pageSize);
						$("#totalPages").val(page.totalPages);
						$("#pageNumberDataDiv input[name='pageNumber']").val(page.pageNum);
						
						// 切换无数据显示与有数据显示 
						$("#pageNumberDataDiv").show();
						$("#pageNumberDataDiv").removeClass("hide");
						$("#pageNumberNoDataDiv").hide();
					} else {
						// 切换无数据显示与有数据显示 
						$("#pageNumberNoDataDiv").show();
						$("#pageNumberNoDataDiv").removeClass("hide");
						$("#pageNumberDataDiv").hide();
					}
				}
			}
		});
	}
	
	$("#pageSize").change(function(){
		var pageSize = $(this).val();
		query(null, pageSize);
	});
	
	$("#pageNumberDataDiv").on("click", ".pagination a[name='_pageNumber']", function(){
		var pageNum = $(this).text();
		$("#pageNumberDataDiv input[name='pageNumber']").val(pageNum-1);
		query(pageNum-1, null);
	});
	
	function getQueryParams() {
		var cardName = $("#cardName").val();
		
		var params = {"cardName" : cardName};
		return params;
	}
</script>
